<template>
  <transition name="fade">
    <div class="capture-wrap" ref="capture" v-if="showCapture">
      <van-overlay :show="isLoad">
        <van-loading color="#1989fa" size="48" class="is-loading" >图片加载中...</van-loading>
      </van-overlay>
      <!-- <van-loading color="#1989fa" size="48" class="is-loading" v-if="isLoad">图片加载中...</van-loading> -->
      <van-icon class="close" name="cross" @click="close" />
      <div class="global-title">- 图片处理 -</div>
      <div class="cropper-wrap">
        <vue-cropper
          ref="cropper"
          :img="option.img"
          :output-size="option.size"
          :output-type="option.outputType"
          :info="option.info"
          :full="option.full"
          :fixed="option.fixed"
          :fixed-number="option.fixedNumber"
          :can-move="option.canMove"
          :can-move-box="option.canMoveBox"
          :fixed-box="option.fixedBox"
          :original="option.original"
          :auto-crop="option.autoCrop"
          :auto-crop-width="option.autoCropWidth"
          :auto-crop-height="option.autoCropHeight"
          :center-box="option.centerBox"
          :high="option.high"
          :mode="option.mode"
          :canScale="option.canScale"
          :infoTrue="option.infoTrue"
          :maxImgSize="option.maxImgSize"
          :enlarge="option.enlarge"
          @img-load="imgLoad"
        >
        </vue-cropper>
      </div>
      <div class="button-wrap">
        <van-button round type="info" plain size="small" @click="rotateLeft"
          >右旋90°</van-button
        >
        <van-button round type="info" plain size="small" @click="rotateRight"
          >左旋90°</van-button
        >
        <van-button round type="primary" size="small" @click="finish('base64')"
          >完成</van-button
        >
      </div>
    </div>
  </transition>
</template>

<script>
import { VueCropper } from "vue-cropper";
import { Toast, Button, Icon, Loading, Overlay } from "vant";
/**
     * 内置方法 通过this.$refs.cropper 调用
     this.$refs.cropper.startCrop() 开始截图
     this.$refs.cropper.stopCrop() 停止截图
     this.$refs.cropper.clearCrop() 清除截图
     this.$refs.cropper.changeScale() 修改图片大小 正数为变大 负数变小
     this.$refs.cropper.getImgAxis() 获取图片基于容器的坐标点
     this.$refs.cropper.getCropAxis() 获取截图框基于容器的坐标点
     this.$refs.cropper.goAutoCrop 自动生成截图框函数
     this.$refs.cropper.rotateRight() 向右边旋转90度
     this.$refs.cropper.rotateLeft() 向左边旋转90度
     图片加载的回调 imgLoad 返回结果success, error
     获取截图信息
     this.$refs.cropper.cropW 截图框宽度
     this.$refs.cropper.cropH 截图框高度
     */
export default {
  name: "ImageCapture",
  components: {
    VueCropper,
    [Toast.name]: Toast,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Loading.name]: Loading,
    [Overlay.name]: Overlay,
  },
  data() {
    return {
      option: {
        img: "", // 裁剪图片的地址
        size: 1, // 裁剪生成图片的质量
        full: true, // 输出原图比例截图 props名full
        outputType: "png", // 裁剪生成图片的格式
        canMove: true, // 上传图片是否可以移动
        fixedBox: false, // 固定截图框大小 不允许改变
        original: false, // 上传图片按照原始比例渲染
        canMoveBox: true, // 截图框能否拖动
        autoCrop: true, // 是否默认生成截图框
        fixed: false, // 是否开启截图框宽高固定比例
        // fixedNumber: [1, 1], // 截图框的宽高比例
        // autoCropWidth: 342, //  默认生成截图框宽度-->只有自动截图开启 宽度高度才生效
        // autoCropHeight: 220,// 默认生成截图框高度
        centerBox: true, // 截图框是否被限制在图片里面
        high: true, // 是否按照设备的dpr 输出等比例图片
        mode: "cover", // mode  图片默认渲染方式
        info: false, // 裁剪框的大小信息
        canScale: true, // canScale 图片是否允许滚轮缩放
        infoTrue: true, // infoTrue  true 为展示真实输出图片宽高 false 展示看到的截图框宽高:
        maxImgSize: 2000, // maxImgSize  限制图片最大宽度和高度
        enlarge: 1, // enlarge 图片根据截图框输出比例倍数
      },
      showCapture: false, // 控制弹窗展示
      isLoad: true, // 图片是否加载完成，控制loading
    };
  },
  methods: {
    // 供外部调用 -> show
    show(data) {
      this.option.img = data;
      this.showCapture = true;
    },
    // 关闭弹窗-取消截图
    close() {
      this.showCapture = false;
      this.isLoad = true;
      this.$emit("cancel");
    },
    // 左旋转
    rotateLeft() {
      this.$refs.cropper.rotateLeft();
    },
    // 右旋转
    rotateRight() {
      this.$refs.cropper.rotateRight();
    },
    // 确认截图
    finish(type) {
      this.$refs.cropper.getCropData((data) => {
        this.$emit("confirm", data);
        this.isLoad = true;
        this.showCapture = false;
      });
    },
    // 图片加载完成
    imgLoad(msg) {
      this.isLoad = false;
    },
  },
};
</script>

<style lang="stylus" scoped>
.capture-wrap
  width 100%
  height 100%
  position fixed
  top 0
  left 0
  bottom 0
  right 0
  z-index 9999
  transition 0.3s
  background white
  overflow-y auto
  .is-loading
    position absolute
    left 50%
    top 50%
    z-index 999
    transform translate(-50%, -50%)
  .close
    position absolute
    right 10px
    top 10px
    z-index 998
    font-size 20px
  .cropper-wrap
    width 100%
    height calc(100% - 63px - 55px)
    box-sizing border-box
    overflow hidden
  .button-wrap
    padding 10px
    height 55px
    box-sizing border-box
    display flex
    flex-wrap wrap
    align-content center
    justify-content center
    button
      padding 0 15px
      &:not(:last-child)
        margin-right 15px
// 弹出动画
.fade-enter-active, .fade-leave-active
  transition top 0.5s
.fade-enter, .fade-leave-to
  top 100%
</style>